<!--认证-->
<template>
    <div>
        <nav-com :navText="navText" :navTextDes="navTextDes"></nav-com>
        <div class="certify-wrapper">

            <Form ref="formCustom" :model="formCustom" :rules="ruleValidate" :label-width="130" inline>
                <div>
                    <FormItem  label="疫苗本编号" prop="serialnum">
                        <Input type="text" v-model="formCustom.serialnum" placeholder="输入疫苗本编号"></Input>
                    </FormItem>
                    <FormItem prop="name" label="宝宝姓名 ">
                        <Input type="text" v-model="formCustom.name" placeholder="输入姓名"></Input>
                    </FormItem>

                    <FormItem  label="身份证号">
                        <Input type="text" v-model="formCustom.idcard" placeholder="输入身份证号"></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem  label="出生证号">
                        <Input type="text" v-model="formCustom.borncard" placeholder="输入出生证号"></Input>
                    </FormItem>
                    <FormItem label="性别">
                        <Select v-model="formCustom.sex" class="common-select">
                            <Option value="0">男</Option>
                            <Option value="1">女</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="出生日期" prop="birthday">
                        <DatePicker type="date"  v-model="formCustom.birthday" format="yyyyMMdd"></DatePicker>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="出生医院">
                        <Input type="text" v-model="formCustom.bornhospital" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="出生体重" class="weight-input">
                        <Input v-model="formCustom.bornweight"></Input>
                        <span class="unit">kg</span>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="母亲姓名"  prop="mothername" >
                        <Input type="text" v-model="formCustom.mothername" placeholder=""></Input>
                    </FormItem>


                    <FormItem label="父亲姓名">
                        <Input type="text" v-model="formCustom.fathername" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="过敏史">
                        <Input type="text" v-model="formCustom.allergydes" placeholder=""></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="接种禁忌">
                        <Input type="text" v-model="formCustom.taboodes" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="健康状况">
                        <Select v-model="formCustom.healthtype" class="common-select">
                            <Option value="0">健康</Option>
                            <Option value="1">良好</Option>
                            <Option value="2">生病</Option>
                        </Select>
                    </FormItem>
                </div>
                <div class="address-select">
                    <FormItem label="居住地址" style="width:1200px;">
                        <Select v-model="formCustom.nowpcity" class="common-select" @on-change="provinceChange">
                            <Option :value="item.id" v-for="(item,index) in province" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.nowccity" class="common-select" @on-change="cityChange">
                            <Option :value="item.id" v-for="(item,index) in city" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.nowycity" class="common-select" @on-change="areaChange">
                            <Option :value="item.id" v-for="(item,index) in area" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.nowtcity" class="common-select" @on-change="townChange">
                            <Option :value="item.id" v-for="(item,index) in town" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.nowvcity" class="common-select">
                            <Option :value="item.id" v-for="(item,index) in community" :key="index">{{item.name}}</Option>
                        </Select>
                        <Input type="text" v-model="formCustom.nowdetail" placeholder="" class="address-input"></Input>
                    </FormItem>
                </div>
                <div class="address-select">
                    <FormItem label="户籍地址" style="width:1200px;">
                        <Select v-model="formCustom.householdpcityid" class="common-select" @on-change="provinceChangeHouse">
                            <Option :value="item.id" v-for="(item,index) in provinceHouse" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.householdccityid" class="common-select" @on-change="cityChangeHouse">
                            <Option :value="item.id" v-for="(item,index) in cityHouse" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.householdycityid" class="common-select" @on-change="areaChangeHouse">
                            <Option :value="item.id" v-for="(item,index) in areaHouse" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.householdtcityid" class="common-select" @on-change="townChangeHouse">
                            <Option :value="item.id" v-for="(item,index) in townHouse" :key="index">{{item.name}}</Option>
                        </Select>
                        <Select v-model="formCustom.householdvcityid" class="common-select">
                            <Option :value="item.id" v-for="(item,index) in communityHouse" :key="index">{{item.name}}</Option>
                        </Select>
                        <Input type="text" v-model="formCustom.householddetail" placeholder="" class="address-input"></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="发证单位电话">
                        <Input type="text" v-model="formCustom.cerphone" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="发证单位（签章）">
                        <Input type="text" v-model="formCustom.cercompany" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="发证日期">
                        <DatePicker type="date"  v-model="formCustom.certime" format="yyyyMMdd"></DatePicker>
                    </FormItem>
                </div>
                <div class="footer">
                    <Button type="primary" @click="certificationSave('formCustom')">保存</Button>
                    <Button @click="back">返回</Button>
                </div>
            </Form>
        </div>
    </div>

</template>

<script>
    import {child,body,real} from '@/api/inoculate/inoculate';
    import navCom from '@/components/nav-com.vue';

    export default {
        data () {
            return {
                navText: '挂号接种',
                navTextDes: '挂号',
                formCustom: {
                    id: null,
                    serialnum: '',
                    name: '',
                    idcard: '',
                    borncard: '',
                    sex: '0',
                    birthday: '',
                    bornhospital: '',
                    mothername: '',
                    fathername: '',
                    allergydes: '',
                    taboodes: '',
                    cerphone: '',
                    cercompany: '',
                    bornweight: '',
                    healthtype: '0',

                    nowpcity: '',
                    nowccity: '',
                    nowycity: '',
                    nowtcity: '',
                    nowvcity: '',
                    nowdetail: '',

                    householdpcityid: '',
                    householdccityid: '',
                    householdycityid: '',
                    householdtcityid: '',
                    householddetail: '',
                    householdvcityid: '',
                },
                province: [],
                city: [],
                area: [],
                town: [],
                community: [],

                provinceHouse: [],
                cityHouse: [],
                areaHouse: [],
                townHouse: [],
                communityHouse: [],
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入宝宝姓名', trigger: 'blur' }
                    ],
                    serialnum:[
                        { required: true, message: '请输入疫苗本编号', trigger: 'blur' }
                    ],
                    birthday: [
                        { required: true, type: 'date', message: '请选择出生日期', trigger: 'change' }
                    ],
                    mothername: [
                        { required: true, message: '请输入母亲姓名', trigger: 'blur' }
                    ],
                },
            }
        },
        mounted(){
          this.getData();
        },
        methods:{
            back(){
                this.$router.push({path: '/home/registration'});
            },
            getData(){
                body().then((res) => {
                    if(res.data.error==1){
                        let info=res.data.r;
                        this.formCustom.id=info.id;
                        this.formCustom.serialnum=info.serialnum;   // 疫苗本编号
                        this.formCustom.name=info.name;  // 宝宝姓名
                        this.formCustom.idcard=info.idcard;   // 身份证号
                        this.formCustom.borncard=info.borncard;  // 出生证号

                        // 性别
                        if(info.sex==false){
                            this.formCustom.sex='0'
                        }else{
                            this.formCustom.sex='1'
                        }

                        // 健康状况
                        if(info.healthtype==0){
                            this.formCustom.healthtype = '0'
                        }else if(info.healthtype==1){
                            this.formCustom.healthtype = '1'
                        }else if(info.healthtype==2){
                            this.formCustom.healthtype = '2'
                        }

                        this.formCustom.birthday=this.$moment(info.birthday).format('YYYYMMDD');  // 出生日期
                        this.formCustom.bornhospital=info.bornhospital;  //  出生医院
                        this.formCustom.bornweight=info.bornweight;  // 出生体重
                        this.formCustom.mothername=info.mothername;  // 母亲姓名
                        this.formCustom.fathername=info.fathername;  // 父亲姓名
                        this.formCustom.allergydes=info.allergydes;  // 过敏史
                        this.formCustom.taboodes=info.taboodes;  // 接种禁忌

                        this.formCustom.cerphone= info.cerphone;  // 发证单位电话
                        this.formCustom.cercompany= info.cercompany;  // 发证单位
                        this.formCustom.certime= this.$moment(info.certime).format('YYYYMMDD');  // 发证日期

                        // 居住地址
                        this.province=res.data.nbean.plist;
                        // province
                        for(let i in this.province){
                            if(this.province[i].current==1){
                                this.formCustom.nowpcity=this.province[i].id;
                            }
                        }
                        // city
                        this.city=res.data.nbean.clist;
                        for(let i in this.city){
                            if(this.city[i].current==1){
                                this.formCustom.nowccity=this.city[i].id;
                            }
                        }
                        // area
                        this.area=res.data.nbean.ylist;
                        for(let i in this.area){
                            if(this.area[i].current==1){
                                this.formCustom.nowycity=this.area[i].id;
                            }
                        }
                        // town
                        this.town=res.data.nbean.tlist;
                        for(let i in this.town){
                            if(this.town[i].current==1){
                                this.formCustom.nowtcity=this.town[i].id;
                            }
                        }
                        // community
                        this.community=res.data.nbean.vlist;
                        for(let i in this.community){
                            if(this.community[i].current==1){
                                this.formCustom.nowvcity=this.community[i].id;
                            }
                        }
                        // nowdetail
                        this.formCustom.nowdetail=info.nowdetail;

                        // 户籍地址
                        this.provinceHouse=res.data.hbean.plist;
                        //    provinceHouse
                        for(let i in this.provinceHouse){
                            if(this.provinceHouse[i].current==1){
                                this.formCustom.householdpcityid=this.provinceHouse[i].id;
                            }
                        }
                        //   cityHouse
                        this.cityHouse=res.data.hbean.clist;
                        for(let i in this.cityHouse){
                            if(this.cityHouse[i].current==1){
                                this.formCustom.householdccityid=this.cityHouse[i].id;
                            }
                        }
                        //    areaHouse
                        this.areaHouse=res.data.hbean.ylist;
                        for(let i in this.areaHouse){
                            if(this.areaHouse[i].current==1){
                                this.formCustom.householdycityid=this.areaHouse[i].id;
                            }
                        }
                        //  townHouse
                        this.townHouse=res.data.hbean.tlist;
                        for(let i in this.townHouse){
                            if(this.townHouse[i].current==1){
                                this.formCustom.householdtcityid=this.townHouse[i].id;
                            }
                        }
                        //    communityHouse
                        this.communityHouse=res.data.hbean.vlist;
                        for(let i in this.communityHouse){
                            if(this.communityHouse[i].current==1){
                                this.formCustom.householdvcityid=this.communityHouse[i].id;
                            }
                        }
                        //  householddetail
                        this.formCustom.householddetail = info.householddetail;
                    }
                })
            },
            provinceChange(val){
                child({
                    type:1,
                    pid:val
                }).then((res) => {
                    if(res.data.error==0){
                        this.city=res.data.bean.clist;
                    }
                })
            },
            cityChange(val){
                child({
                    type:2,
                    pid:val
                }).then((res) => {
                    if(res.data.error==0){
                        this.area=res.data.bean.ylist;
                    }
                })
            },
            areaChange(val){
                child({
                    type:3,
                    pid:val
                }).then((res) => {
                    if(res.data.error==0){
                        this.town=res.data.bean.tlist;
                    }
                })
            },
            townChange(val){
                child({
                    type: 4,
                    pid: val
                }).then((res) => {
                    if(res.data.error==0){
                        this.community=res.data.bean.vlist;
                    }
                })
            },
            provinceChangeHouse(val){
                child({
                    type:1,
                    pid:val
                }).then((res) => {
                    if(res.data.error==0){
                        this.cityHouse=res.data.bean.clist;
                    }
                })
            },
            cityChangeHouse(val){
                child({
                    type:2,
                    pid:val
                }).then((res) => {
                    if(res.data.error==0){
                        this.areaHouse=res.data.bean.ylist;
                    }
                })
            },
            areaChangeHouse(val){
                child({
                    type: 3,
                    pid: val
                }).then((res) => {
                    if(res.data.error==0){
                        this.townHouse=res.data.bean.tlist;
                    }
                })
            },
            townChangeHouse(val){
                child({
                    type: 4,
                    pid: val
                }).then((res) => {
                    if (res.data.error == 0) {
                        this.communityHouse = res.data.bean.vlist;
                    }
                });
            },
            certificationSave (name) {
                let that=this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let formData = Object.assign(this.formCustom);
                        formData.birthday = this.$moment(this.formCustom.birthday).format('YYYYMMDD');
                        formData.certime = this.$moment(this.formCustom.certime).format('YYYYMMDD');
                        real(formData).then((res) => {
                            if (res.data.error == 0) {
                                that.$router.push({path: '/home/registeredprocess'});
                            } else {
                                that.$Message.error(res.data.message);
                            }
                        })
                    }
                })
            }
        },
        components: {
            navCom
        },
    }
</script>

<style lang="less">
    .certify-wrapper{
        background: #fff;
        padding:20px 0 50px;
        .ivu-form-item-label{
            font-size:13px;
            font-weight:500;
            color:rgba(53,76,107,1);
        }
        .ivu-input{
            background:rgba(247,249,255,1);
            border:1px solid rgba(93,141,251,1);
            border-radius: 0;
            width:210px;
            height:32px;
            line-height: 32px;
        }
        .common-select{
            width:210px;
            .ivu-select-selection{
                border-radius:0;
                background-color:rgba(247,249,255,1);
                border:1px solid rgba(93,141,251,1);
            }
        }
        .weight-input{
            position: relative;
            .unit{
                position: absolute;
                right:5px;
                top:0;
                color:#5D8DFB;
                font-size:14px;
            }
            .ivu-input{
                padding-right: 30px;
            }
        }
        .address-select{
            .ivu-form-item-content{
                display: flex;
                .common-select{
                    width: 260px;
                    margin-right: 10px;
                }
            }
        }
        .footer{
            text-align: center;
        }
    }
</style>
